﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="KPIAssignDetailPage.aspx.cs" Inherits="FBKPI.Pages.KPIAssignDetailPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
    var oTable;
    var oTable2;
    $(document).ready(function () {
        mainmenu("#nav ul", "#nav li");
        mainmenu("#menu_wrap ul", "#menu_wrap li");

        $("#tabs").tabs();

        $("#divdetail").hide();
        $("#divdetail").dialog({
            title: '<span class="header-text">KPI Assign Detail Form</span>',
            autoOpen: false,
            width: 800,
            height: 500,
            modal: true,
            resizable: false
        });


        //datatable section
        oTable = $("#KPITable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                "sSearch": "Search"
            },
            "bSort": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/KPIAssignDetailSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [{
                "mData": "No"
            }, {
                "mData": "Description"
            }, {
                "mData": "isActive"
            }, {
                "mData": "AssignedEmployee"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Periode"
            }, {
                "mData": "Weight"
            }, {
                "mData": "ID"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"DirectTo('" + oObj.aData["ID"] + "', '" + $("#txt_user").val() + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [10]
            }, {
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [2]
            }, {
                "sClass": "center",
                "aTargets": [0, 2, 9, 10]
            }]
        });

        //mark selected row
        $('body').on("click", '#KPITable tbody tr', function () {
            $('#KPITable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------
        $("#KPITable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear\" oninput=\'GetList($(this).val());\' type=\"text\" \>');
        //--------------------end of datatable section-----------------------------------------

        DirectTo = function (KPIID, user) {
            document.location = "../Pages/InputKPIAssignDetailPage.aspx?User=" + user + "&KPI=" + KPIID + "&KPIAssignDetail=0";
            return false;
        }



        //datatable section
        oTable2 = $("#AssignedTable").dataTable({
            "oLanguage": {
                "sZeroRecords": "No records to display",
                "sSearch": "Search"
            },
            "bSort": true,
            "bPaginate": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bServerSide": true,
            "bDestroy": true,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bDeferRender": true,
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "GET",
                    "url": "../Serializer/KPIAssignedListSerializer.ashx?User=" + $("#txt_user").val() + "&Year=" + $("#txt_selectyear2").val(),
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [{
                "mData": "Employee"
            }, {
                "mData": "No"
            }, {
                "mData": "Description"
            }, {
                "mData": "isActive"
            }, {
                "mData": "KPIParent"
            }, {
                "mData": "GroupKPI"
            }, {
                "mData": "CategoryKPI"
            }, {
                "mData": "TypeKPI"
            }, {
                "mData": "SubTypeKPI"
            }, {
                "mData": "Weight"
            }, {
                "mData": "ID"
            }],
            "aoColumnDefs": [{
                "fnRender": function (oObj) {
                    return "<a href=\"#\" onclick=\"DirectToAssign('" + oObj.aData["ID"] + "', '" + $("#txt_user").val() + "')\"><img src='../images/detail.png' /></a>";
                },
                "aTargets": [10]
            }, {
                "fnRender": function (oObj) {
                    if (oObj.aData["isActive"] == 'True') {
                        return "<img src='../images/check.png' />"
                    } else {
                        return "<img src='../images/cross.png' />"
                    }
                },
                "aTargets": [3]
            }, {
                "sClass": "center",
                "aTargets": [0, 3, 9, 10]
            }]
        }).rowGrouping({
            iGroupingColumnIndex: 0,
            bExpandableGrouping: true,
            bHideGroupingColumn: true
        }); 

        //mark selected row
        $('body').on("click", '#AssignedTable tbody tr', function () {
            $('#AssignedTable tbody tr').removeClass("row_selected");
            $(this).addClass("row_selected");
        });
        //--------------------end of mark selected row-----------------------------
        $("#AssignedTable_filter label").after('&nbsp;KPI Year: <input id=\"txt_selectyear2\" oninput=\'GetList2($(this).val());\' type=\"text\" \>');
        //--------------------end of datatable section-----------------------------------------

        DirectToAssign = function (KPIID, user) {
            document.location = "../Pages/InputKPIAssignDetailPage.aspx?User=" + user + "&KPI=0&KPIAssignDetail=" + KPIID;
            return false;
        }

        GetList = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable.fnDraw();
                }
            }
            else
            { oTable.fnDraw(); }
        }

        GetList2 = function (value) {
            if (value.length > 0) {
                var xx = '0123456789';
                if (xx.indexOf(value[value.length - 1]) < 0) {
                    $("#txt_selectyear2").val(value.toString().replace(value[value.length - 1], ''));
                }

                if (value.length == 4) {
                    oTable2.fnDraw();
                }
            }
            else
            { oTable2.fnDraw(); }
        }
    });
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="kpitable"> 
        <div class="customPageHeader">
            <span class="customPageTitle">Set KPI</span>
        </div>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Assign KPI</a></li>
                <li><a href="#tabs-2">Assigned KPI</a></li>
            </ul>
            <div id="tabs-1">
                <div>
                    <table cellpadding="0" cellspacing="0" class="display" id="KPITable">
                        <thead>
                            <tr>
                                <th>
                                    No
                                </th>
                                <th>
                                    KPI Description
                                </th>
                                <th>
                                    is Active
                                </th>
                                <th>
                                    Assigned Employee
                                </th>
                                <th>
                                    Group
                                </th>
                                <th>
                                    Category
                                </th>
                                <th>
                                    Type
                                </th>
                                <th>
                                    Sub Type
                                </th>
                                <th>
                                    Periode
                                </th>
                                <th>
                                    Weight
                                </th>
                                <th>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>       
                </div>
            </div>
            <div id="tabs-2">
                <div >
                    <table cellpadding="0" cellspacing="0" class="display" id="AssignedTable">
                        <thead>
                            <tr>
                                <th>
                                    Employee
                                </th>
                                <th>
                                    No
                                </th>
                                <th>
                                    KPI Description
                                </th>
                                <th>
                                    is Active
                                </th>
                                <th>
                                    KPI Parent
                                </th>
                                <th>
                                    Group
                                </th>
                                <th>
                                    Category
                                </th>
                                <th>
                                    Type
                                </th>
                                <th>
                                    Sub Type
                                </th>
                                <th>
                                    Weight
                                </th>
                                <th>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>       
                </div>
            </div>
        </div>
        <br />
    </div>
    <div id="divdetail"></div>    
</asp:Content>
